Improve this doc View source

pfCard - Timeframe Filters
directive in module patternfly.card

Description

Directive for easily displaying a card with html content

Usage

as attribute
<ANY pf-card - -timeframe -filters
     head-title="{string}"
     [sub-title="{string}"]
     [show-top-border="{boolean}"]
     [show-titles-separator="{boolean}"]
     [footer="{object}"]
     [filter="{object}"]>
   ...
</ANY>

Parameters

ParamTypeDetails
headTitlestring

Title for the card

subTitle
(optional)
string

Sub-Title for the card

showTopBorder
(optional)
boolean

Show/Hide the blue top border. True shows top border, false (default) hides top border

showTitlesSeparator
(optional)
boolean

Show/Hide the grey line between the title and sub-title. True (default) shows the line, false hides the line

footer
(optional)
object

footer configuration properties:

  • .iconClass - (optional) the icon to show on the bottom left of the footer panel

  • .text - (optional) the text to show on the bottom left of the footer panel, to the right of the icon

  • .href - (optional) the href link to navigate to when the footer href is clicked

  • .callBackFn - (optional) user defined function to call when the footer href is clicked
*Note: If a href link and a callBackFn are specified, the href link will be called

filter
(optional)
object

filter configuration properties:

  • .filters - drop down items for the filter. 
     Ex:  'filters' : [{label:'Last 30 Days', value:'30'},
                   {label:'Last 15 Days', value:'15'},
                   {label:'Today', value:'today'}]
  • .defaultFilter - integer, 0 based index into the filters array
  • .callBackFn - user defined function to call when a filter is selected

Example

Source













Demo